<template>
  <!-- 工程资料问题清单 -->
  <base-breadcrumb :title="$route.meta.title">
      <a-row :gutter="10" class="page-height">
        <a-col :span="4">
          <a-card
            style="border-right:1px solid #d9d9d9" 
              class="page-height-tree"
            >
            <!-- 分部分项 -->
           <tree-search
              :id="projectTypeId"
              ref="treeSearch"
              :api="api"
              :selected-keys.sync="selectedKeys"
              :select-options.sync="selectOptions"
              :init-expand-all="false"
              :handleBtnArr="handleBtnArr"
              :isDelsource = 5
              @loader="search"
               :isTotalSize="isTotalSize"
              @refreshTab="$refs.table.refresh(true)"
               :dataChildren="true"
            />
          </a-card>
        </a-col>
        <a-col :span="20"  class="page-height-list-wrapper" style="background:#fff">
          <searchData :search-data="searchArr" @search="search" />
          <tabs-product-type :id.sync="projectTypeId" @switch="getSubItem" />
          <div class="mb12">
            <a-button
              v-btnPermission="'qm_004_03_add_04'"
              type="primary"
              :disabled="
                selectedKeys.length < 1 || selectOptions.parentId == null || (selectOptions.dataRef && selectOptions.dataRef.children !== null)
              "
              @click="handleManage(0)"
            >
              添加问题类型
            </a-button>
          </div>
          <div class="page-height-list">
          <!-- 表格 -->
          <list-table
            ref="table"
            table-layout="fixed"
            size="default"
            :row-key="(record) => record.id"
            :columns="columns"
            :request="loadData"
            :alert="true"
            :isScrollX="false"
            show-size-changer
            show-quick-jumper
            show-pagination="auto"
          >
            <!-- 表格行操作栏 -->
            <span slot="action" slot-scope="text, record">
              <MoreButton>
                <a v-btnPermission="'qm_004_03_loo_05'" @click="handleManage(2, record)">查看</a>
                <a v-btnPermission="'qm_004_03_edi_06'" @click="handleManage(1, record)">编辑</a>
                <a-divider v-btnPermission="record.status == 0 ? 'qm_004_03_sta_08' : 'qm_004_03_sto_07'" type="vertical" />
                <a v-btnPermission="'qm_004_03_sta_08'" v-if="record.status == 0" @click="handleRemove(record)">启用</a>
                <a v-btnPermission="'qm_004_03_sto_07'" v-else class="del_btn" @click="handleRemove(record)">停用</a>
              </MoreButton>
            </span>
          </list-table>
          </div>
        </a-col>
      </a-row>
    <!-- 问题分类表单弹窗 -->
    <dialog-problem
      ref="dialogProblem"
      :visible.sync="visible"
      :edit-model="editModel"
      :form="form"
      :header-title="headerTitle"
      @confirm="submitForm"
    />
  </base-breadcrumb>
</template>

<script>
import dialogProblem from '@/views/quality/qualityInspection/problemClassificationMaintenance/dialogProblem.vue' // 问题分类表单弹窗
import { STable } from '@/components' // 表格
import { problemType } from '@/api/quality/quality' // 问题维护api
import { subItem } from '@/api/quality/currency' // 通用api
import TreeSearch from '@/components/businessComponents/TreeSearch' // 树
import TabsProductType from '@/components/businessComponents/TabsProductType' // 工程类别tabs
import { mapGetters } from 'vuex'
import { qualityApiUrl } from '@/api/config.js'
import request from '@/utils/request'
const searchArr = [
  // 搜索框
  {
    name: '问题分类名称',
    value: 'problemTypeName',
    type: 'input'
  }
]
const columns = [
  {
    title: '问题分类名称',
    dataIndex: 'problemTypeName',
    width: 180,
  },
  {
    title: '问题描述',
    ellipsis: true,
    dataIndex: 'problemType',// 问题描述的字段和规范规定的字段，因为用户录入数据写反了，因此这两个字段反着取
    width: 180,
  },
  {
    title: '规范规定',
    ellipsis: true,
    dataIndex: 'problemTypeDescription',
    width: 180,
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 180,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    dialogProblem,
    TreeSearch,
    TabsProductType
  },
  computed: {
    ...mapGetters(['btnPermission']),
    // 弹窗动态标题
    headerTitle() {
      return ['添加问题分类', '编辑问题分类', '查看问题分类'][this.editModel]
    },
    // 表格列表请求参数
    args() {
      let args = this.queryParam
      // 添加工程类别id
      args.projectTypeId = this.projectTypeId
      // 添加分部分项id
      if (this.selectOptions.id) {
        args.subItemId = this.selectOptions.id
      }
      return args
    },
    api() {
      subItem.delete = (data) => {
        return request({
          url: `${qualityApiUrl}/universal/project-type/sub-item/delete`,
          method: 'get',
          params: data
        })
      }
      return subItem
    },
    // 禁用添加
    addDisable() {
      // qualityApiUrl = '/cscec-quality-business'
      return ''
    }
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      // 操作类型：0 添加 1 编辑 3 查看
      editModel: 0,
      projectTypeId: '', // 工程类别选项控件
      // 责任区域弹窗控件
      visible: false,
      selectedKeys: [], // 选中节点
      // 弹窗参数
      form: null,
      pic: '', // 施工图
      // 查询参数
      queryParam: {},
      isTotalSize:false, //判断总数是否大于0
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (this.selectedKeys?.length) {
          let obj = {checkTypeCode:2}
          const requestParameters = Object.assign({}, parameter, this.args,obj)
          return problemType.postList(requestParameters).then((res) => {
            this.isTotalSize=res.totalSize*1>0?true:false; 
            return res
          })
        }
      },
      boxHeight: 0, // 盒子高度
      // 选中节点对象
      selectOptions: {},
      //动态操作按钮配置
      handleBtnArr:[{name:'添加节点',key:'qm_004_03_add_01'},{name:'编辑节点',key:'qm_004_03_edi_02'},{name:'删除节点',key:'qm_004_03_del_03'}]
    }
  },
  watch:{
     selectOptions(val){
      console.log(val,222222)
     }
  },
  methods: {
    // 获取分项工程
    getSubItem() {
      let that = this
      that.$refs.treeSearch.getList().then((res) => {
        if (that.selectedKeys?.length) {
          // 获取列表
          that.search()
        }
      })
    },
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
      }
      this.$refs.table.refresh(true)
    },
    // 提交问题分类表单
    submitForm(e) {
      let that = this
      let name = ['create', 'update'][that.editModel] // 根据操作切换url地址
      if (that.editModel == 0) {
        e.subItemId = e.id
      }
      // e.subItemName = e.name
      problemType[name](e)
        .then((res) => {
          that.$refs.dialogProblem.loading = false
          // if (res.data.code === 200 || res.code === 200) {
          that.$message.success(['添加', '编辑'][that.editModel] + '成功！')
          that.visible = false
          that.$refs.table.loadData()
          // } else {
          //   that.$message.warning(['添加', '编辑'][that.editModel] + '失败！')
          // }
        })
        .catch((res) => {
          that.$refs.dialogProblem.loading = false
        })
    },
    // 停启用
    handleRemove(e) {
      let that = this
      let status = ['启用', '停用'][e.status] || '操作'
      that.$confirm({
        title: '温馨提示',
        content: `确认${status}？`,
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return problemType.switchStatus({ id: e.id, status: e.status ? 1 : 0 }).then((res) => {
            // if (res.data.code === 200 || res.code === 200) {
            that.$message.success(status + '成功！')
            that.$refs.table.loadData()
            // } else {
            //   that.$message.warning(status + '失败！')
            // }
          })
        }
      })
    },
    // 业务区域：新增/编辑/查看
    handleManage(b, a) {
      // b 操作类型;a 行数据
      if (b) {
        this.form = a
      } else {
        // if (this.selectedKeys.length > 0 && this.selectOptions.parentId != null) {
        this.selectOptions.subItemName = this.selectOptions.name
        this.form = this.selectOptions
        // } else {
        //   this.$message.warning('请先选择具体的分项工程！')
        //   return
        // }
      }
      this.editModel = b
      this.form.typeId = '727821144189134524';   //添加问题区分类别
      // 添加
      this.visible = true // 打开弹窗
    }
  }
}
</script>

